<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/layout/layout.xhtml">

	<ui:define name="content">
		<h:form id="form">
			<p:growl id="growl" showDetail="true"
				style="text-align: center; width:995px" />
		    
			<p:dataTable id="tableClientes" var="cliente"
				value="#{listeClienteControler.clientes}" paginator="true"
				rows="50" rowsPerPageTemplate="20,50,100,200,500" rowKey="#{cliente.id}"
				selection="#{listeClienteControler.selectedCliente}"
				selectionMode="single"
				style="margin-left:0.5em;width:99%">
				
 				<p:ajax event="rowSelect" update=":form:detail" oncomplete="detailClienteDialog.show()" />
                    
				<f:facet name="header">  
            		Liste des clientes (#{fn:length(listeClienteControler.clientes)} clientes)
            		<ui:include src="/pages/hidden/hiddenTableClientes.xhtml" />
            		
            		<h:commandLink immediate="true">
						<p:graphicImage value="/images/charlott/excel.png" />
						<p:dataExporter type="xls" target="hiddenTableClientes"
							fileName="charlottweb_clientes_xls" />
					</h:commandLink>

            		<h:commandLink immediate="true">
						<p:graphicImage value="/images/charlott/csv.png" />
						<p:dataExporter type="csv" target="hiddenTableClientes"
							fileName="charlottweb_clientes_csv" />
					</h:commandLink>
				</f:facet>

				<p:column filterBy="#{cliente.nom}" sortBy="#{cliente.nom}">
					<f:facet name="header">
						<h:outputText value="Nom" />
					</f:facet>
					<h:outputText value="#{cliente.nom}" />
				</p:column>

				<p:column filterBy="#{cliente.prenom}" sortBy="#{cliente.prenom}">
					<f:facet name="header">
						<h:outputText value="Prenom" />
					</f:facet>
					<h:outputText value="#{cliente.prenom}" />
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Telephone" />
					</f:facet>
					<h:outputText value="#{cliente.adresse.telephone} " />
				</p:column>
				
				<p:column filterBy="#{cliente.adresse.ville}" sortBy="#{cliente.adresse.ville}">
					<f:facet name="header">
						<h:outputText value="Adresse" />
					</f:facet>
					<h:outputText value="#{cliente.adresse}" />
				</p:column>
				
				<p:column filterBy="#{cliente.hotesse.nom}" sortBy="#{cliente.hotesse.nom}">
					<f:facet name="header">
						<h:outputText value="Hotesse" />
					</f:facet>
					<h:outputText value="#{cliente.hotesse}" />
				</p:column>
				
				<p:column sortBy="#{cliente.derniereVisite}">
					<f:facet name="header">
						<h:outputText value="Derniere visite" />
					</f:facet>
					<h:outputText value="#{cliente.derniereVisite}" >
						<f:convertDateTime timeZone="GMT+3" pattern="dd/MM/yyyy" />
					</h:outputText>
				</p:column>

			</p:dataTable>

			<ui:include src="/pages/cliente/detailsClienteDialog.xhtml">
				<ui:param name="cliente"
					value="#{listeClienteControler.selectedCliente}" />
				<ui:param name="backBean"
					value="#{listeClienteControler}" />
			</ui:include>

		</h:form>
	</ui:define>

</ui:composition>